<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
            background-color: #f8f8f8;
        }
        .order_complete {
            background-color: #fff;
            text-align: center;
            padding: 15px 0;
            margin-bottom: 6px;
            display: none;
        }
        .order_complete img {
            height: 36px;
            vertical-align: middle;
        }
        .order_complete .order_p {
            font-size: 15px;
            font-weight: bold;
            color: #333;
            margin-top: 11px;
        }
        .order_complete .order_btn {
            margin-top: 20px;
            overflow: hidden;
            display: inline-block;
        }
        .order_complete .order_btn .btn {
            width: 70px;
            height: 26px;
            line-height: 26px;
            float: left;
            color: #e62442;
            border: 1px solid #e62442;
            border-radius: 5px;
            margin-right: 10px;
            font-size: 12px;
        }
        .order_complete .order_btn .btn:last-child {
            margin-right: 0;
        }
        .order_complete .order_btn .btn_s {
            color: #fff;
            background-color: #e62442;
        }
        .order_unpay {
            background-color: #fff;
            text-align: center;
            padding: 15px 0;
            margin-bottom: 6px;
            display: none;
        }
        .order_unpay img {
            height: 36px;
            vertical-align: middle;
        }
        .order_unpay .order_p {
            font-size: 15px;
            font-weight: bold;
            color: #333;
            margin-top: 11px;
        }
        .order_canceled {
            background-color: #fff;
            text-align: center;
            padding: 15px 0;
            margin-bottom: 6px;
            display: none;
        }
        .order_canceled img {
            height: 36px;
            vertical-align: middle;
        }
        .order_canceled .order_p {
            font-size: 15px;
            font-weight: bold;
            color: #333;
            margin-top: 11px;
            margin-bottom: 15px;
        }
        .order_canceled .order_text {
            width: 200px;
            margin: auto;
            font-size: 13px;
            color: #999;
            text-align: center;
        }
        .order_prompt {
            background-color: #fff;
            text-align: center;
            padding: 15px 0;
            margin-bottom: 6px;
            display: none;
        }
        .order_prompt img {
            height: 36px;
            vertical-align: middle;
        }
        .order_prompt .order_p {
            font-size: 15px;
            font-weight: bold;
            color: #333;
            margin-top: 11px;
            margin-bottom: 15px;
        }
        .order_prompt .order_text {
            width: 210px;
            margin: auto;
            font-size: 13px;
            color: #999;
            text-align: center;
        }
        .seller_info {
            display: -webkit-box;
            display: -webkit-flex;
            align-items: center;
            background-color: #fff;
            padding: 10px 15px;
            border-bottom: 1px solid #e8e8e8;
        }
        .seller_info .seller_info_l .seller_img {
            width: 45px;
            height: 45px;
        }
        .seller_info .seller_info_l .seller_img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .seller_info .seller_info_c {
            width: 0;
            flex: 1;
            -webkit-flex: 1;
            box-flex: 1;
            -webkit-box-flex: 1;
            padding: 0 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .seller_info .seller_info_r img {
            height: 13px;
            display: block;
        }
        .order_info {
            background-color: #fff;
            margin-bottom: 6px;
        }
        .order_info .goods {
            padding: 16px 15px;
            border-bottom: 1px solid #e8e8e8;
            display: -webkit-box;
            display: -webkit-flex;
            color: #999;
        }
        .order_info .goods .goods_l {
            width: 0;
            box-flex:1;
            -webkit-box-flex:1; 
            flex:1;
            -webkit-flex:1; 
        }
        .order_info .goods ul li {
            margin-bottom: 19px;
        }
        .order_info .goods ul li:last-child .li_box {
            margin-bottom: 0;
        }
        .order_info .goods .li_boxl {
            font-size: 14px;
            flex: 1;
            -webkit-flex: 1;
            box-flex: 1;
            -webkit-box-flex: 1;
            padding-right: 5px;
        }
        .order_info .goods .li_boxr {
            font-size: 12px;
            overflow: hidden;
            line-height: 20px;
            display: block;
            width: 25%;
            display: -webkit-flex;
        }
        .order_info .goods .li_boxr .goods_num {
            margin-right: 17px;
            float: left;
        }
        .order_info .goods .li_boxr .goods_price {
            text-align: right;
            float: right;
            display: -webkit-box;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
            overflow: hidden;
            -webkit-box-orient: vertical;
            flex: 1;
        }
        .discount_box {
            border-bottom: 1px solid #e8e8e8;
        }
        .discount {
            height: 50px;
            line-height: 50px;
            padding: 0 15px;
            display: -webkit-box;
            display: -webkit-flex;
        }
        .discount .discount_l {
            font-size: 12px;
            color: #999;
            flex: 1;
            -webkit-flex: 1;
            box-flex: 1;
            -webkit-box-flex: 1;
        }
        .discount .discount_l span {
            width: 16px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            background-color: #ff5f78;
            color: #fff;
            display: inline-block;
            border-radius: 3px;
            margin-right: 5px;
        }
        .discount .discount_r {
            color: #999;
            font-size: 12px;
        }
        .distribution_price {
            height: 50px;
            line-height: 50px;
            padding: 0 15px;
            display: -webkit-box;
            display: -webkit-flex;
            border-bottom: 1px solid #e8e8e8;
        }
        .distribution_price .distribution_price_l {
            color: #333;
            font-size: 15px;
            flex: 1;
            -webkit-flex: 1;
            box-flex: 1;
            -webkit-box-flex: 1;
        }
        .distribution_price .distribution_price_r {
            color: #999;
            font-size: 12px;
        }
        .common_box {
            height: 50px;
            line-height: 50px;
            padding: 0 15px;
            display: -webkit-box;
            display: -webkit-flex;
            border-bottom: 1px solid #e8e8e8;
            background-color: #fff;
        }
        .common_box .common_boxl {
            color: #333;
            font-size: 15px;
            padding-right: 5px;
        }
        .common_box .common_boxr {
            flex: 1;
            -webkit-flex: 1;
            box-flex: 1;
            -webkit-box-flex: 1;
            color: #999;
            font-size: 12px;
            text-align: right;
        }
        .common_box .gst_num {
            color: #999;
        }
        .no_border_bottom {
            border-bottom: none;
        }
        .price_num {
            color: #e62442;
            font-size: 15px;
        }
        .remark_box {
            background-color: #fff;
        }
        .remark_box .remark_detail {
            width: 100%;
            /*height: 60px;*/
            color: #333;
            font-size: 14px;
            padding: 10px 15px;
            box-sizing: border-box;
            display: block;
        }
        .remark_box .remark_detail .remark_desc{
            color: #999;
        }
        .title_p {
            height: 35px;
            line-height: 41px;
            padding: 0 15px;
            font-size: 12px;
            color: #999;
        }
        .distribution_box {
            padding: 14px 15px;
            display: -webkit-box;
            display: -webkit-flex;
            align-items: center;
            border-bottom: 1px solid #e8e8e8;
            background-color: #fff;
        }
        .distribution_box .distribution_boxl {
            color: #333;
            font-size: 15px;
            padding-right: 5px;
        }
        .distribution_box .distribution_boxr {
            flex: 1;
            -webkit-flex: 1;
            box-flex: 1;
            -webkit-box-flex: 1;
            color: #999;
            font-size: 12px;
            text-align: right;
        }
        .distribution_box .distribution_boxr .distribution_p1 {
            margin-bottom: 10px;
        }
        .staff_box {
            padding: 14px 15px;
            display: -webkit-box;
            display: -webkit-flex;
            align-items: center;
            background-color: #fff;

        }
        .staff_box .staff_boxl {
            flex: 1;
            -webkit-flex: 1;
            box-flex: 1;
            -webkit-box-flex: 1;
            color: #333;
            font-size: 15px;
            padding-right: 5px;
        }
        .staff_box .staff_boxc {
            margin-right: 7px;
        }
        .staff_box .staff_boxc .staff_img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
            border: 1px solid #d3d3d3;
        }
        .staff_box .staff_boxc .staff_img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .staff_box .staff_boxr {
            color: #999;
            font-size: 12px;
        }
        .staff_box .staff_boxr .staff_p1 {
            margin-bottom: 10px;
        }
        .order_unpay {
            display: none;
        }
        .gst_box {
            display: none;
        }
        .hidden{
            display: none !important;
        }
        .h10 {
            height: 10px;
        }
        .staff_phone {
            height: 65px;
            background-color: #fff;
            border-bottom: 1px solid #e8e8e8;
            overflow: hidden;
        }
        .staff_phone .staff_phonel {
            height: 65px;
            float: left;
            display: -webkit-box;
            -webkit-box-align: center;
            padding: 0 15px;
        }
        .staff_phone .staff_phonel .img_box {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
            border: 1px solid #d3d3d3;
        }
        .staff_phone .staff_phonel .img_box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .staff_phone .staff_phoner {
            height: 65px;
            float: right;
            padding: 0 15px;
            display: -webkit-box;
            -webkit-box-align: center;
        }
        .staff_phone .staff_phoner img {
            width: 36px;
            display: block;
        }
        .cancel_desc {
            display: none;
        }
        .coupon ,.ticket{
            display: none;
        }
        .payment_method {
            padding: 0 15px 16px;
            margin-bottom: 6px;
            background: white;
            display: none;
        }
        .payment_method .payment_method_t {
                height: 48px;
                line-height: 48px;
        }
        .payment_method .payment_method_b ul {
            overflow: hidden;
        }
        .payment_method .payment_method_b ul li {
            width: 50%;
            float: left;
            padding: 0 8px 0 0;
            box-sizing: border-box;
        }
        .payment_method .payment_method_b ul li:nth-child(2n) {
            padding: 0 0 0 8px;
        }
        .payment_method .payment_method_b ul li .li_pay {
            height: 55px;
            border: 1px solid #ccc;
            border-radius: 5px;
            display: -webkit-box;
            -webkit-box-align: center;
            -webkit-box-pack: center;
        }
        .payment_method .payment_method_b ul li .li_pay img {
            width: 31px;
            display: block;
            margin-right: 11px;
        }
        .payment_method .payment_method_b ul li .li_pay span {
            display: block;
            color: #333;
            font-size: 12px;
        }
        .pay_type .active .li_pay{
          border:1px solid #e62442 !important;
        }
        .outer_ul{
            width: 100%;
        }
        .outer_ul_li{
            display: -webkit-flex;
        }
        .default_address_icon{
          width: 20px;
          height: 20px;
          display: block;
          margin-top: 15px;
          float: right;
        }
    </style>
</head>
<body>
    <div class="order_unpay">
        <img src="../image/order_complete.png">
        <div class="order_p">请尽快完成订单支付</div>
        <div class="order_btn">
            
        </div>
    </div>
    <div class="order_complete">
        <img src="../image/order_complete.png">
        <div class="order_p">订单已完成</div>
        <div class="order_btn">
            <div class="btn" onclick="fnOpenSeller();" tapmode>再来一单</div>
            <div class="btn btn_s hidden look_comment" onclick="fnLookComment();" tapmode>查看评价</div>
            <div class="btn btn_s hidden go_comment" onclick="fnToComment();">去评价</div>
        </div>
    </div>
    <div class="order_canceled">
        <img src="../image/order_canceled.png">
        <div class="order_p">已取消订单</div>
        <div class="order_text cancel_desc">该订单金额将于3至5个工作日内返回您支付时使用的账户。</div>
    </div>
    <div class="order_prompt">
        <img src="../image/order_complete.png">
        <div class="order_p">收到餐后请确认收货</div>
        <div class="order_text">骑手因网络问题无法进行扫码确认，请您在收到餐后进行确认收货操作。</div>
    </div>
    <div class="seller_info" shop_id="" onclick="fnOpenShop();" tapmode>
        <div class="seller_info_l">
            <div class="seller_img">
                <img class="shop_img" src="../image/default.png">
            </div>
        </div>
        <div class="seller_info_c shop_title">商家名称</div>
        <div class="seller_info_r">
            <img src="../image/right.png">
        </div>
    </div>
    <div class="order_info">
        <div class="goods">
                <ul class="outer_ul" id="goods_ul">
                    <!-- <li class="outer_ul_li">
                        <div class="li_boxl goods_l">菜品名称菜品名称菜品名称菜品名称菜品名称菜品名称菜品名称菜品名称菜品名称</div>
                        <div class="li_boxr goods_r">
                            <span class="goods_num">×1</span>
                            <span class="goods_price">RM191919191919</span>
                        </div>
                    </li>
                    <li class="outer_ul_li">
                        <div class="li_boxl goods_l">餐盒</div>
                        <div class="li_boxr goods_r">
                            <span class="goods_num">×33</span>
                            <span class="goods_price">RM3</span>
                        </div>
                    </li> -->
                </ul>
            <!-- <div class="goods_l">
                <ul >
                    <li>
                        <div class="li_boxl">菜品名称</div>
                    </li>
                    <li>
                        <div class="li_boxl">餐盒</div>
                    </li>
                </ul>
            </div>
            <div class="goods_r">
                <ul>
                    <li>
                        <div class="li_boxr">
                            <span class="goods_num">×1</span>
                            <span class="goods_price">RM19</span>
                        </div>
                    </li>
                    <li>
                        <div class="li_boxr">
                            <span class="goods_num">×33</span>
                            <span class="goods_price">RM3</span>
                        </div>
                    </li>
                </ul>
            </div> -->
        </div>
        <div class="discount_box coupon">
            <ul>
                <li>
                    <div class="discount">
                        <div class="discount_l"><span>减</span><time class="coupon_str"></time></div>
                        <div class="discount_r">-RM<span class="coupon_price"></span></div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="discount_box ticket">
            <ul>
                <li>
                    <div class="discount">
                        <div class="discount_l"><span>卷</span>使用优惠卷</div>
                        <div class="discount_r">-RM<span class="ticket_price"></span></div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="common_box">
            <div class="common_boxl">配送费</div>
            <div class="common_boxr">RM<span class="delivery_price"></span></div>
        </div>
        <div class="common_box gst_box">
            <div class="common_boxl">GST<span class="gst_num">（6.00%）</span></div>
            <div class="common_boxr">RM<span class="gst_fee"></span></div>
        </div>
        <div class="common_box no_border_bottom">
            <div class="common_boxl">订单金额</div>
            <div class="common_boxr price_num">RM<span class="must_pay"></span></div>
        </div>
    </div>
<!--     <div class="remark_box">
        <textarea placeholder="请输入文字"></textarea>
    </div> -->
    <div class="remark_box">
        <div class="remark_detail"><span class="remark_desc"></span></div>
    </div>
    <div class="title_p">配送信息</div>
    <div class="distribution_box">
        <div class="distribution_boxl">收货地址</div>
        <div class="distribution_boxr">
            <div class="distribution_p1 address_detail"></div>
            <div class="distribution_p2"><span class="username"></span> <span class="tel"></span></div>
        </div>
    </div>
    <div class="staff_box hidden">
        <div class="staff_boxl">骑手信息</div>
        <div class="staff_boxc">
            <div class="staff_img">
                <img src="../image/temp/1.png">
            </div>
        </div>
        <div class="staff_boxr">
            <div class="staff_p1 staff_name"></div>
            <div class="staff_p2 staff_phone"></div>
        </div>
    </div>
    <div class="title_p">订单信息</div>
    <div class="common_box">
        <div class="common_boxl">订单号</div>
        <div class="common_boxr order_number"></div>
    </div>
    <div class="common_box">
        <div class="common_boxl">开发票</div>
        <div class="common_boxr">
          <img class="default_address_icon" src="../image/select_address_on.png">
        </div>
    </div>
    
    <div class="common_box">
        <div class="common_boxl">支付方式</div>
        <div class="common_boxr">在线支付</div>
    </div>
    <div class="payment_method">
        <div class="payment_method_t">支付方式</div>
        <div class="payment_method_b">
            <ul class="pay_type">
                <li class="active" onclick="fnPayType(1,this);" tapmode>
                  <div class="li_pay">
                    <img style="width: 80px;" src="../image/paydollar.png">
                  </div>
                </li>
                <li onclick="fnPayType(2,this);" tapmode>
                    <div class="li_pay">
                        <img src="../image/cmb.png">
                        <span>支付宝        </span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="common_box no_border_bottom">
        <div class="common_boxl">下单时间</div>
        <div class="common_boxr create_time"></div>
    </div>
    <div class="h10"></div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script id="goodsTpl" type="text/x-dot-template">
    {{ for(var i=0;i<it['goods'].length;i++){ }}
        <li class="outer_ul_li">
            <div class="li_boxl goods_l">{{=it['goods'][i]['goods_name']}}</div>
            <div class="li_boxr goods_r">
                <span class="goods_num">×{{=it['goods'][i]['goods_num']}}</span>
                <span class="goods_price">RM{{=(it['goods'][i]['price']*it['goods'][i]['goods_num']).toFixed(2)}}</span>
            </div>
        </li>
    {{ }; }}
    <li class="outer_ul_li">
        <div class="li_boxl goods_l">餐盒</div>
        <div class="li_boxr goods_r">
            <span class="goods_num">×{{=it['canteen_num']}}</span>
            <span class="goods_price">RM{{=(it['canteen_price']*1).toFixed(2)}}</span>
        </div>
    </li>

    
</script>
<script type="text/javascript">
    var payType = 1; // 默认paydollar支付

    apiready = function(){
        openLoading();
        id = api.pageParam.id;
        status = api.pageParam.status;
        user = $api.getStorage('user_data');
        if(status == 0) {
            $('.order_unpay').show();
            $('.payment_method').show();
            $(".payment_method").prev('.common_box').hide();
        }else if(status == 4) {
            $('.order_prompt').show();
        }else if(status == 5) {
            $('.order_complete').show();
            $('.go_comment').removeClass('hidden');
        }else if(status == 6) {
            $('.order_complete').show();
            $('.look_comment').removeClass('hidden');
        }else if(status == -1) {
            $('.order_canceled').show();
        }else if(status == -2) {
            $('.order_canceled').show();
            $('.cancel_desc').show();
        }
        getOrder();

        //支付订单
        api.addEventListener({
            name: 'payOrderEvent'
        }, function(ret, err) {
            if (ret) {
                // 继续支付逻辑，直接传order_id調起paydollar支付即可
                if(payType == 1){
                  fnPaydollarPay(id);
                }else{
                  api.toast({
                    msg: '支付宝支付',
                    location: 'middle'
                  });
                }
                /*api.ajax({
                    url: rootPath+'/api/order/pay_order',
                    method: 'post',
                    data: {
                        values: { 
                            uid: user.id,
                            token:user.token,
                            order_id:id,
                        },
         
                    }
                }, function(ret, err) {
                    if (ret) {
                        if(ret.status == 200) {
                            api.toast({
                                msg: '支付成功',
                                location:'middle'
                            });
                            api.sendEvent({
                                name: 'orderChangeEvent',
                                extra: {
                                }
                            });
                            setTimeout(function(){
                                api.closeWin();
                            },1000);
                        }else {
                            api.toast({
                                msg: ret.msg,
                                location:'middle'
                            });
                        }
                    } else {
                        alert(JSON.stringify(err));
                    }
                });*/
            }
        });
    };

    function fnPaydollarPay (order_id) {
      api.openWin({
        name: 'paydollar',
        url: './paydollar.html',
        pageParam: {
            order_id: order_id
        }
      });
    }

    function fnPayType(type,this_) {
      $('.pay_type li').removeClass('active');
      $(this_).addClass('active');
      payType = type;
    }

    function getOrder() {
        user = $api.getStorage('user_data');
        api.ajax({
            url: rootPath+'/api/order/order_detail',
            method: 'get',
            data: {
                values: { 
                    order_id: id,
                    uid:user.id,
                    token:user.token
                },

            }
        }, function(ret, err) {
            if (ret) {
                shop_id = ret.data.shop_id;
                setDotData(ret.data,'goodsTpl','goods_ul',true);
                $('.shop_title').text(ret.data.shop_name);
                var shop_img = formatVideoImg(ret.data.shop_img);
                $('.shop_img').attr('src',shop_img);
                if(ret.data.gst_fee > 0) {
                  $('.gst_box').css('display','-webkit-flex');
                  $('.gst_fee').text(ret.data.gst_fee);
                }
                if(ret.data.coupon_id > 0) {
                    $('.coupon').show();
                    $('.coupon_str').text(ret.data.coupon_str);
                    $('.coupon_price').text(ret.data.coupon_price);
                }
                if(ret.data.ticket_id > 0) {
                    $('.ticket').show();
                    $('.ticket_price').text(ret.data.ticket_price);
                }
                $('.delivery_price').text(ret.data.delivery_price);
                $('.must_pay').text(ret.data.must_pay);
                $('.address_detail').text(ret.data.address_detail);
                $('.username').text(ret.data.username);
                $('.tel').text(ret.data.tel);
                $('.order_number').text(ret.data.order_number);
                $('.create_time').text(ret.data.create_time);
                var _remark = ret.data.remark?ret.data.remark:'暂无备注';
                $(".remark_desc").text(_remark);
            } else {
                api.toast({
                    msg: err.msg,
                    location : 'middle'
                });
            }
            closeLoading();
        });
    }

    function fnOpenShop() {
        if(shop_id) {
            api.openWin({
                name: 'seller',
                url: './seller.html',
                pageParam: {
                    id: shop_id
                }
            });
        }
    }

    function fnToComment() {
        api.openWin({
            name: 'release_evaluate_order',
            url: './release_evaluate_order.html',
            pageParam: {
                order_id: id
            }
        });
    }

    function fnOpenSeller() {
        api.openWin({
            name: 'seller',
            url: './seller.html',
            pageParam: {
                id: shop_id
            }
        });
    }

    function fnLookComment() {
        api.openWin({
            name: 'evaluate_order',
            url: './evaluate_order.html',
            pageParam: {
                order_id: id,
            }
        });
    }
</script>
</html>